<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="ColorVertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform float u_PointSize;
    uniform mat4 u_ModelM4;
    uniform mat4 u_PvM4;
    void main(){
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
        gl_PointSize = u_PointSize;
    }
</script>
<script id="ColorFragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
        gl_FragColor = u_Color;
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, OrthographicCamera, PerspectiveCamera, Spherical, Ray } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Poly from '../js/Poly4.js'

    import Geo from '../js/Poly/Geo.js'
    import Mat from '../js/Poly/Mat.js'
    import Obj3D from '../js/Poly/Obj3D.js'
    import Scene from '../js/Poly/Scene.js'



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl", { antialias: true, });

    // gl.enable(gl.DEPTH_TEST);//开始背景遮挡会频闪
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);//去图片描边
    //#endregion


    let program = CreateProgram(gl,
        document.querySelector('#ColorVertexShader').innerText,
        document.querySelector('#ColorFragmentShader').innerText);




    const scene = new Scene({ gl: gl });

    const pvM4 = new Matrix4();
    const modelM4 = new Matrix4();

    const camera = new PerspectiveCamera(45, canvas.width / canvas.height, 1, 20);
    const cameraController = new CameraController({
        pvMatrix: pvM4,
        canvas: canvas,
        camera: camera,
        rendEvent: draw,
    });

    const nodeLength = 0.5;
    const nodeArr = [
        -nodeLength, nodeLength,
        -nodeLength, -nodeLength,
        nodeLength, -nodeLength,
        nodeLength, nodeLength,
    ];

    const elementArr = [
        0, 1, 2,
        0, 2, 3,
    ];

    let obj00 = new Obj3D().createAxis(createProgram())
    scene.add(obj00);





    let eye = new Vector3(-0.3, -0.9, 0.3);
    let lookAt = new Vector3(-1, 0, 0);

    console.log(eye.clone().sub(lookAt))

    let ray = new Ray(eye).lookAt(lookAt);

    console.log(ray.origin)
    console.log(ray.direction)
    //0.5773502691896256, 0.5773502691896256, 0.5773502691896256, 0,

    let lookAt1 = new Matrix4().lookAt(
        new Vector3(lookAt.x, lookAt.y, lookAt.z),
        new Vector3(eye.x, eye.y, eye.z),
        new Vector3(0, 1, 0)
    );
    console.log(lookAt1.elements)//其实就是矩阵lookAt后 8 ,9 ,10 位的相反数?
    // [
    //     0.7071067811865476, 0, -0.7071067811865476, 0,
    //     -0.40824829046386296, 0.8164965809277259, -0.40824829046386296, 0,
    //     0.5773502691896256, 0.5773502691896256, 0.5773502691896256, 0,
    //     0, 0, 0, 1
    // ];

    let b = lookAt.clone().sub(eye).normalize();
    console.log(b)


    let eyeNode = new Obj3D({
        geo: new Geo({
            data: {
                'a_Position': {
                    size: 3, array: new Float32Array(
                        [
                            eye.x, eye.y, eye.z,
                            lookAt.x, lookAt.y, lookAt.z,
                        ]
                    )
                },
            },
            element: { array: new Uint8Array([0, 1]) }
        }),
        mat: new Mat({
            program: program,
            mode: ['POINTS', 'LINES'],
            data: {
                'u_PvM4': { type: 'uniformMatrix4fv', value: pvM4.elements },
                'u_ModelM4': { type: 'uniformMatrix4fv', value: modelM4.elements },
                'u_PointSize': { type: 'uniform1f', value: 20 },
                'u_Color': { type: 'uniform4fv', value: [1, 0, 1, 1], cRend: true },
            },

        }),
    });
    scene.add(eyeNode);


    draw();


    const { program: name } = eyeNode.mat;
    console.log(name)
    console.log(program)


    function createProgram() {
        return CreateProgram(gl,
            document.querySelector('#ColorVertexShader').innerText,
            document.querySelector('#ColorFragmentShader').innerText)
    }

    function draw() {
        scene.setUniform('u_PvM4', { value: pvM4.elements });
        scene.draw();
    }
</script>

</html>